<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head">{{ $route.meta.title }}</div>

  <div class="ivu-card-body"><Table :columns="list.columns" :data="list.items" :loading="list.loading"></Table></div>
</div>
</template>
<script>
import Vue from 'vue';
import { Table, Page } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import apiConfig from '@/utils/apiConfig';
import config from '@/config';
import auth from '@/utils/auth';

export default {
  components: {
    [Table.name]: Table,
    [Page.name]: Page
  },
  data() {
    return {
      config,
      apiConfig,
      token: auth.getToken(),
      list: {
        columns: [
          {title: '键', key: 'key', align: 'center'},
          {title: '值', key: 'value', align: 'center'},
          {title: '名称', key: 'name', align: 'center'},
          {title: '描述', key: 'describe', align: 'center'},
          {title: '修改时间', key: 'last_update_time', align: 'center', render: (h, params) => { return h('span', new Date(params.row.last_update_time * 1000).toLocaleString()); }},
          {title: '操作', key: 'action', align: 'center', render: (h, params) => {
            var _this = this;
            var opeare = [];
            opeare.push(h('a', {
              class: 'ivu-btn ivu-btn-primary ivu-btn-small',
              on: {
                click() {
                  _this.$router.push({name: 'systemParameterUpdate', params: {'key': params.row.key}});
                }
              }
            }, '修改'));
            return h('div', opeare);
          }}
        ],
        loading: false,
        items: []
      }
    };
  },
  methods: {
    _initialize() {
      var _this = this;
      apiConfig.getItem().then(function(api_config) {
        _this.apiConfig = api_config;
        _this.getData();
      });
    },
    getData() {
      let _this = this;
      _this.list.loading = true;
      ajaxiView.get('/backstage/system/parameter?token='+_this.token).then(function(data) {
        if(data !== false && typeof(data.models) != 'undefined') {
          _this.list.items = data.models;

          _this.list.loading = false;
        }
      });
    }
  },
  mounted() {
    this._initialize();
  }
}
</script>
<style>
.ivu-table-cell .ivu-btn.ivu-btn-small {
  margin-right: 5px;
}
</style>